<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>库存盘点预警管理</title>
	<meta name="decorator" content="default"/>
	<style type="text/css">
		#productList{
			float:right;width:78%;height:300px;border:1px solid #cccccc;display:block;
			overflow: auto;border-radius:0;
		}
		#productList li a{
			border-color:#f3f3f3;
			background:#fff;
			color:#000;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#name").focus();
			$("#inputForm").validate({
				submitHandler: function(form){
					var lists = $("#productList li");
					var ids = "";
					for(var i =0; i < lists.length; i++) {
						var item = lists[i];
						ids += item.id + ",";
					}
					if (ids && ids != '') {
						$("#productIds").val(ids);
						loading('正在提交，请稍等...');
						form.submit();
					} else {
						showTip("产品不能为空！");
					}
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
			$("#productList").delegate(".delete", "click", function(){
        		var item = $(this).parent();
        		item.remove();
	 		});		
		});
		function addProduct(type){
			var url = '${ctx}/inventory/storeInventoryAlert/storeProductData?type=' + type;
			var extIds = "";
			var lists = $("#productList li");
			for(var i =0; i < lists.length; i++) {
				var item = lists[i];
				extIds += item.id + ",";
			}
			global.addMultSelectList(url, "选择产品", extIds, "productList");
		}
	</script>
</head>
<body>
	<form:form id="inputForm" class="form-input" modelAttribute="storeInventoryAlert" action="${ctx}/inventory/storeInventoryAlert/save" method="post">
		<form:hidden path="id"/>
		<form:hidden path="store.id" value="${fns:getStore().id}"/>
		<input id="productIds" name="productIds" type="hidden" value=""/>
		<div class="icon-buttons">
			<a href="${ctx}/inventory/storeInventoryAlert/" data-icon="back" data-iconpos="notext" data-role="button" data-inline="true">返回</a>
			<input id="btnSubmit" type="submit" data-icon="check" data-iconpos="notext" value="保 存" data-inline="true"/>
		</div>
		<tags:message content="${message}"/>
		<div data-role="fieldcontain">
			<label for="product">使用产品:</label>
			<div>
				<input type="button" value="添加系统产品" data-inline="true" data-icon="plus" onclick="addProduct(0)">
				<input type="button" value="添加店面产品" data-inline="true" data-icon="plus" onclick="addProduct(1)">
			</div>
			<ul id="productList" data-role="listview" data-inset="true"  data-split-icon="delete" data-split-theme="a">
				<c:forEach var="map" items="${productMap}">
					<li id='${map.key}'><a>${map.value}</a><a class="delete"></a></li>
		 		</c:forEach>
			</ul>
		</div>
		<div data-role="fieldcontain">
			<label for="alertAmount">预警值:</label>
			<form:input path="alertAmount" htmlEscape="false" maxlength="50" class="required number"/>
		</div>
	</form:form>
</body>
</html>
